import { Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Icon } from "antd-mobile";

import routes from "./router";
/*
  BrowserRouter 
    所有路由必须作为BrowserRouter的子组件才会有效果
    否则会报错
  Route 
    根据路由路径的变化来匹配path，匹配上就加载component
    没有匹配上就会卸载
  Switch
    只会加载显示其中一个路由组件
  Redirect
    重定向
  Link  路由链接：用来跳转路由路径
  NavLink 路由链接：用来跳转路由路径
*/

function App() {
  return (
    // 当组件还未加载成功时，会显示fallback的值
    <Suspense fallback={<Icon type="loading" />}>
      <Router>
        <Switch>
          {
            // 遍历路由配置项，生成Route组件
            routes.map((route) => {
              // return <Route
              //   path={route.path}
              //   component={route.component}
              //   key={route.path}
              // />
              /*
              简写
              route --> { path: 'xx', component: xxx }
              {...route}
                --> {} jsx语法，里面使用js语法
                --> ...route 
                  将route对象上所有属性展开到Route组件上
                  作为Route组件的属性
            */

              return <Route {...route} key={route.path} exact />;
            })
          }
        </Switch>
      </Router>
    </Suspense>
  );
}

export default App;
